<template>
    <div class="table-box">
        <ProTable ref="proTable" :requestApi="api.getList" :columns="columns">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="primary" :icon="CirclePlus" @click="openUserDialog('新增')">新增角色</el-button>
                <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
                    @click="onBatchRemove(scope.ids)">
                    批量删除角色
                </el-button>
            </template>
            <!-- Expand -->
            <template #expand="scope">
                {{ scope.row }}
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <el-button type="primary" link :icon="View" @click="openUserDialog('查看', scope.row)">查看</el-button>
                <el-button type="primary" link :icon="EditPen" @click="openUserDialog('编辑', scope.row)">编辑</el-button>
                <el-button type="primary" link :icon="Discount" @click="onAuth(scope.row)">授权</el-button>
                <el-button type="primary" link :icon="Delete" @click="onRemove(scope.row)">删除</el-button>
            </template>
        </ProTable>
        <FormDialog ref="formDialogRef"></FormDialog>
    </div>
</template>

<script setup lang="tsx" name="role">

import { ref, reactive } from "vue";
import { CirclePlus, Delete, EditPen, View, Discount } from "@element-plus/icons-vue";
import { useRoute, useRouter } from 'vue-router';
import { useHandleData } from "/@/hooks/useHandleData";

import FormDialog from "./components/FormDialog.vue";

import * as api from "/@/api/auth/role";
import columnsFunction from './columns';
import ProTable from "/@/components/ProTable/index.vue";

const route = useRoute();
const router = useRouter();

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 获取表头信息
const columns = columnsFunction();

/**
 * 授权
 */
const onAuth = (params: any) => {
    router.push({
        path: '/auth/permissionRelation',
        query: { targetId: params.id, status: 1, title: params.name },
    })
}


// 删除用户信息
const onRemove = async (params: any) => {
    await useHandleData(api.remove, { id: params.id }, `删除【${params.name}】角色`);
    proTable.value.refresh();
};

// 批量删除用户信息
const onBatchRemove = async (ids: string[]) => {
    await useHandleData(api.remove, { ids }, "删除所选角色信息");
    proTable.value.refresh();
};

// 打开 dialog(新增、查看、编辑)
interface FormDialogExpose {
    acceptParams: (params: any) => void;
}
const formDialogRef = ref<FormDialogExpose>();
const openUserDialog = (title: string, rowData = {}) => {
    let params = {
        title: title,
        rowData: { ...rowData },
        isView: title === "查看" ? true : false,
        apiUrl: title === "新增" ? api.add : title === "编辑" ? api.edit : "",
        getTableList: proTable.value.refresh
    };
    formDialogRef.value!.acceptParams(params);
};
</script>
